<template>
  <div class="detail">
    <v-navbar/>
    <div class="banner">
      <swiper :list="bannerList" class="swiper-height"></swiper>
      <div class="shade" v-if="this.type == 0">
        <!-- <img src="../../../styles/imgs/deal/deal.png" alt=""> -->
      </div>
    </div>
    <div class="detail_goods">
      <p class="goodsName">{{goodsData.goodsName}}</p>
      <p class="deal">
        <span class="price">￥{{goodsData.platformRetailPrice}}</span>
      </p>
      <p class="deal deal-bottom">
        <span class="marketP">市场价￥{{goodsData.marketRetailPrice}}</span>
        <span class="num">库存{{goodsData.surplusStock}}</span>
        <span class="num">销量{{goodsData.salesVolume}}</span>
      </p>
    </div>
    <div class="goodsDetail">
      <div class="bidsTit">
        <img src="../../../styles/imgs/deal/detail.png" alt="">
        <span>商品详情</span>
      </div>
      <div class="goodsImg" v-html="detailImg">
      </div>
    </div>
    <!-- 底部 -->
    <div class="bottom">
      <div class="bottom-wrapper">
        <div class="block" @click.stop="_doCollection">
          <div>
            <i class="icon" :class="{'select': isCollection}"></i>
          </div>
          <span>收藏</span>
        </div>
        <!--<div class="block" @click="_share">-->
        <!--<div>-->
        <!--<i class="icon share"></i>-->
        <!--</div>-->
        <!--<span>分享</span>-->
        <!--</div>-->
        <div class="confirm shop_car" @click.stop="_confirm">
          <span class="text">加入购物车</span>
        </div>
        <div class="confirm" @click.stop="_buy">
          <span class="text">立即购买</span>
        </div>
      </div>
    </div>
    <!-- 分享 -->
    <div v-show="share">
      <share :price="price" @closeShare="_closeShore" :goodsName=goodsData.name></share>
    </div>
  </div>
</template>

<script>
  import userImg from '@imgs/self/user_img.png'
  import swiper from '@c/swiper/swiper'
  import navbar from '@c/navbar/navbar'
  import share from '@c/share/share'
  import close from '@imgs/self/close.png'
  import CountDown from '@c/countDown/countDown'
  import { formatDate } from '@js/formatDate.js'
  import { Connect } from '@api/apiUrl'
  import { mapState, mapMutations } from 'vuex'
  import { vpost, sonpost, fpost, gpost, vlink } from '@api/axios'
  import { tokenPost, jtpost, gtpost, tokenLink, jtget } from '@api/axiosByToken'
  import {
    tokenAtPost,
    jtAtpost,
    gtAtpost,
    tokenAtLink,
    jtAtget,
  } from '@api/axiosAutionToken'

  export default {
    name: 'DealDetail',
    data() {
      return {
        userImg,
        type: null,
        ball: false, //弹框
        price: '2000',
        share: false, //分享
        animate: false,
        bidId: '0', //查询出价记录id
        goodsData: {}, //产品数据
        goodsTime: {}, //产品倒计时
        bannerList: [],
        currentTime: 0, //当前系统时间
        timer: '',
        bids: [], //出价记录
        close, //关闭图像
        detailImg: '', //产品详情图片
        isCollection: false,
        auctionPrice: '', //产品价
        bidsTime: '', //出价记录循环
        skuId: '', //前往下一期id
        sock: {}, //socket
        stomp: '',
      }
    },

    components: {
      swiper,
      'v-navbar': navbar,
      share,
      CountDown,
    },

    computed: {
      ...mapState(['wtitle', 'rback', 'signed']),
    },

    mounted() {
    },

    methods: {
      ...mapMutations(['WTITLE', 'RBACK', 'USERSINGED']),
      // 添加到购物车
      _confirm() {
        let key = localStorage.getItem('userId')
        if (key === null) {
          this.$Message.warning('请先登录')
          // this.$router.push('/login')
          return
        }
        let confirm = {
          userId: window.localStorage.getItem('userId'),
          goodsSkuId: this.goodsData.goodsSkuId
        }
        this.$store.state.loadding = true
        tokenPost(tokenLink.cart.add, confirm).then(re => {
          this.$store.state.loadding = false
          if (re.status === 0) {
            this.$Message.success('成功添加到购物车')
          } else {
            this.$Message.warning(re.msg)
          }
        })
      },
      //立即购买
      _buy() {
        let key = localStorage.getItem('userId')
        if (key === null) {
          this.$Message.warning('请先登录')
          // this.$router.push('/login')
          return
        }
        let confirm = {
          userId: window.localStorage.getItem('userId'),
          goodsSkuId: this.goodsData.goodsSkuId
        }
        this.$store.state.loadding = true
        tokenPost(tokenLink.promptlyBuy, confirm).then(re => {
          this.$store.state.loadding = false
          if (re.status === 0) {
            this.$store.state.orderId = re.data
            this.$router.push('/Order')
          } else {
            this.$Message.warning(re.msg)
          }
        })
      },
      // 显示分享
      _share() {
        this.share = true
      },
      // 关闭分享
      _closeShore() {
        this.share = false
      },
      showMarquee() {
        this.animate = true
        setTimeout(() => {
          this.bids.push(this.bids[0])
          this.bids.shift()
          this.animate = false
        }, 500)
      },
      // 获得产品详情
      _getEndGoods() {
        this.$store.state.loadding = true
        vpost(vlink.dealDetail + this.$route.query.id).then(re => {
          this.$store.state.loadding = false
          if (re.status === 0) {
            this.goodsData = re.data[0]
            this.bannerList = re.data[0].goodsImgList
            this.detailImg = re.data[0].goodsIntro1
            this.skuId = re.data.goodsSkuId
            this._getCollection()
          } else {
            this.$Message.warning(re.msg)
          }
        })
      },
      // 前往下一期
      _NextIssue() {
        if (this.skuId === undefined) {
          this.$Message.warning('所拍商品库存不足!请拍其余商品!')
          return
        }
        this.$router.push({
          path: 'dealDetail',
          name: 'DealDetail',
          query: {
            type: 1,
            id: this.goodsData.goodsSkuId,
          },
        })
      },
      // 收藏
      _getCollection() {
        let key = localStorage.getItem('userId')
        if (key === null) {
          return
        }
        let userInfo
        if (this.goodsData.goods_sku_id) {
          userInfo = {
            userId: window.localStorage.userId,
            goodsSkuId: this.goodsData.goodsSkuId,
          }
        } else {
          userInfo = {
            userId: window.localStorage.userId,
            goodsSkuId: this.goodsData.goodsSkuId,
          }
        }
        this.$store.state.loadding = true
        tokenPost(tokenLink.isCollection, userInfo).then(re => {
          this.$store.state.loadding = false
          if (re.status === 0) {
            this.isCollection = re.data
          } else {
            this.$Message.warning(re.msg)
          }
        })
      },
      // 点击收藏
      _doCollection() {
        let key = localStorage.getItem('userId')
        if (key === null) {
          this.$Message.warning('请先先登录!')
          return
        }
        if (this.isCollection) {
          this._requestCollection(tokenLink.cancelCollection)
        } else {
          this._requestCollection(tokenLink.addCollection)
        }
      },
      // 请求收藏
      _requestCollection(url) {
        let userInfo
        if (this.goodsData.goods_sku_id) {
          userInfo = {
            userId: window.localStorage.userId,
            goodsSkuId: this.goodsData.goods_sku_id,
          }
        } else {
          userInfo = {
            userId: window.localStorage.userId,
            goodsSkuId: this.goodsData.goodsSkuId,
          }
        }
        tokenPost(url, userInfo).then(re => {
          if (re.status === 0) {
            this.$Message.info(re.msg)
            this.isCollection = !this.isCollection
          } else {
            this.$Message.warning(re.msg)
          }
        })
      },
      // 判断商品状态
      _isGoodsState() {
        this.WTITLE('产品详情')
        this.RBACK(true)
        this._getEndGoods()
      },
    },
    mounted() {
      this.$nextTick(() => {
        this._isGoodsState()
      })
    },
  }
</script>
<style scoped>
</style>
